<ui:composition xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:iqbs="http://xmlns.jcp.org/jsf/composite/iqbs">
    
    <p:dialog id="explicitGroupNewDialog" width="65%" header="#{bundle['dataverse.permissions.explicitGroupEditDialog.title.new']}" widgetVar="explicitGroupForm" modal="true">
        <p:focus for="explicitGroupName"/>
        <p:fragment id="explicitGroupNewDialogMessages">
            <div class="container messagePanel">
                <iqbs:messages collapsible="true" />
            </div>
        </p:fragment>
        <p:fragment id="explicitGroupNewDialogContent">
            <div class="form-horizontal">
                <p class="help-block">#{bundle['dataverse.permissions.explicitGroupEditDialog.help']}</p>
                <div class="form-group">
                    <label for="explicitGroupName" class="col-sm-3 control-label">
                        #{bundle['dataverse.permissions.explicitGroupEditDialog.groupName']} <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/>
                    </label>
                    <div class="col-sm-9">
                        <p:panelGrid columns="2" styleClass="noBorders">
                            <p:inputText id="explicitGroupName" styleClass="form-control" value="#{manageGroupsPage.explicitGroupName}"
                                         required="#{param['DO_GROUP_VALIDATION']}"
                                         requiredMessage="#{bundle['dataverse.permissions.explicitGroupEditDialog.groupName.required']}"/>
                            <p:message for="explicitGroupName"/>
                        </p:panelGrid>
                    </div>
                </div>
                <div class="form-group">
                    <label for="explicitGroupIdentifier" class="col-sm-3 control-label">
                        #{bundle['dataverse.permissions.explicitGroupEditDialog.groupIdentifier']}
                        <span class="glyphicon glyphicon-asterisk text-danger" title="#{bundle.requiredField}"/>
                        <span class="glyphicon glyphicon-question-sign tooltip-icon"
                              data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataverse.permissions.explicitGroupEditDialog.groupIdentifier.tip']}"></span>
                    </label>
                    <div class="col-sm-9">
                        <p:panelGrid columns="2" styleClass="noBorders">
                            <p:inputText id="explicitGroupIdentifier" styleClass="form-control"
										 value="#{manageGroupsPage.explicitGroupIdentifier}"
                                         required="#{param['DO_GROUP_VALIDATION']}"
                                         requiredMessage="#{bundle['dataverse.permissions.explicitGroupEditDialog.groupIdentifier.required']}"
                                         validator="#{manageGroupsPage.validateGroupIdentifier}"
										binding="#{manageGroupsPage.explicitGroupIdentifierField}"/>
                            <p:message for="explicitGroupIdentifier"/>
                        </p:panelGrid>
                        <p class="help-block">#{bundle['dataverse.permissions.explicitGroupEditDialog.groupIdentifier.helpText']}</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="newExplicitGroupDescription" class="col-sm-3 control-label">
                        #{bundle['dataverse.permissions.explicitGroupEditDialog.groupDescription']}
                    </label>
                    <div class="col-sm-6">
                        <h:inputTextarea id="newExplicitGroupDescription" styleClass="form-control" value="#{manageGroupsPage.newExplicitGroupDescription}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="roleAssigneeName" class="col-sm-3 control-label">
                        #{bundle['dataverse.permissions.explicitGroupEditDialog.roleAssigneeNames']}
                    </label>
                    <div class="col-sm-9">
                        <p:autoComplete id="roleAssigneeName" placeholder="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup.enterName']}"
                                        multiple="true" scrollHeight="180" forceSelection="true" 
                                        minQueryLength="2" queryDelay="1000"                                      
                                        groupBy="#{roleAssignee.identifier.startsWith('@')?'Users':'Groups'}"                                        
                                        emptyMessage="#{bundle['dataverse.permissions.usersOrGroups.assignDialog.userOrGroup.invalidMsg']}"
                                        value="#{manageGroupsPage.newExplicitGroupRoleAssignees}"
                                        completeMethod="#{manageGroupsPage.completeRoleAssignee}"
                                        var="roleAssignee" 
                                        itemLabel="#{roleAssignee.displayInfo.title}" itemValue="#{roleAssignee}" converter="roleAssigneeConverter">
                            <p:column>
                                <h:outputText value="#{roleAssignee.displayInfo.title}"/> 
                                <h:outputText value=" (#{roleAssignee.displayInfo.affiliation})" rendered="#{!empty roleAssignee.displayInfo.affiliation}"/>
                            </p:column>
                            <p:column>
                                <h:outputText value="#{roleAssignee.identifier}"/>
                            </p:column>
                            <p:ajax process="@this" event="itemSelect" />
                            <p:ajax process="@this" event="itemUnselect" />
                        </p:autoComplete>
                        <!-- tried handle_dropdown_popup_scroll() fix here, conflicts -->
                    </div>
                </div>
            </div>
            <div class="button-block">
                <p:commandButton styleClass="btn btn-default" 
                               value="#{bundle['dataverse.permissions.explicitGroupEditDialog.createGroup']}"
                               update="explicitGroupNewDialogContent allGroups :messagePanel,@form"
                               actionListener="#{manageGroupsPage.createExplicitGroup}"
                               oncomplete="if (args &amp;&amp; !args.validationFailed) PF('explicitGroupForm').hide();">
                    <f:param name="DO_GROUP_VALIDATION" value="true"/>
                </p:commandButton>
                <button class="btn btn-link" onclick="PF('explicitGroupForm').hide()" type="button">
                    #{bundle.cancel}
                </button>
            </div>
        </p:fragment>
    </p:dialog>
</ui:composition>
